<template>
  <div >
  <div class="search">
    <input @confirm="headleSearch" confirm-type="search" v-model="searchContent" type="text" placeholder="search">
    <span @click="headleClear" v-show="searchContent" class="clear">x</span>
  </div>
    
  <div class="activityList-box" >
    <div class="activityList">
        <ul> 
          <li @click="toActivityDetail(activity)" v-for="(activity, index) in activityList" :key="index">
            <a href="javascript:void(0)"> 
              <p class="title">{{activity.title}}</p>
              <p class="date">{{activity.local}}</p>
              <p class="date">{{activity.startTime}}</p>
            </a>
          </li>
        </ul>
    </div>
  </div> 

  <div class="add" >
    <button @click="toCreateA">+</button>
  </div>
  </div>
</template>

<script>
import request from '../../utils/request'
import moment from 'moment'
  export default{
    data(){
      return {
        searchContent:'',
        activityList:[],
        userInfo:''
      }
    },  
    async mounted() {
      let data = this.searchContent
      let result = await request('/activity/list',{data},'GET');
      console.log(result)
      this.activityList = result
      
    },  
    methods: {
      toCreateA(){ 
        this.userInfo = wx.getStorageSync('userInfo')
        if(wx.getStorageSync('user').isAdmin==1){
          wx.navigateTo({
            url:'/pages/createActivity/main'
          })
        }else if(this.userInfo){
          wx.navigateTo({
              url:'/pages/login/main'
            })
        }else{
          wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            this.userInfo=res.userInfo;
            wx.setStorageSync('userInfo',this.userInfo);
            wx.login({ 
              success: async (res) => {
              //let code = res.code  //有效时长5分钟
              let data ={
                code:res.code,
                img:this.userInfo.avatarUrl,
                wxname:this.userInfo.nickName
              }
              console.log(data);
              let token = await request('/user/getOpenId',{data},'GET');
              //将自定义登陆状态缓存到storage中 
              wx.setStorageSync('token',token)
              console.log(token)
              }             
            })  
            wx.navigateTo({
              url:'/pages/login/main'
            })
        },
        fail: (res) => {
            this.userInfo={};
            console.log(res);
          },
      })

      }
        
      },
      toActivityDetail(activity){
        wx.navigateTo({
          url:'/pages/activityDetail/main?activity='+ JSON.stringify(activity),
        })
        console.log(activity)
      },
      headleClear(){
        this.searchContent='',
        this.activicyList=[]
      },
      async headleSearch(){

        let data=this.searchContent
        console.log(data)
        let result = await request('/activity/list',{data},'GET');
        console.log(result)
        this.activityList = result
      },
    },
  }
</script>

<style scoped>

.search input{
  border-bottom: 1px black solid;
  text-align: center;
  height: 30px;
  margin-top: 20px;
  margin-left: 22px;
  width: 85%;
}

.search .clear{
  position:absolute;
  right:13px;
  top:20px;
  z-index: 99;
}
.activityList-box{
  width: 100%;
}

.activityList-box .activityList{
  width: 85%;
  margin:auto ;
}

.activityList-box .activityList ul li{
  margin-top: 23px;
  background: rgb(219, 145, 145);
  box-shadow: -10px 10px rgb(148, 143, 143);
  opacity: .7;
  border-radius: 10px;
}

.activityList-box .activityList ul li .title{
  font-size: 22px;

}

.activityList-box .activityList ul li .date{
  font-size: 17px;
  margin-top:7px
  
}


.add{
  position:fixed;
  z-index: 1000;
  top:75%;
  left:75%;
  width: 70px;
  height: 50px;
}
.add button{
  background-color: rgb(214, 187, 187);
  border-radius: 50px;
  padding: 10px;
  opacity: .6;
}
</style>
